<template>
    <div class="poster" v-show="show_show">
        <div id="poster" v-show="show_show" :style="{transform: 'scale('+scale+')'}">
            <!--S关闭按钮-->
            <div class="close" @click="close">
                <i class="iconfont icon-guanbi"></i>
            </div>
            <!--E关闭按钮-->

            <!--S海报-->
            <div class="poster-poster">
                <h3>长按可保存红包码</h3>
                <img v-lazy="src" />
            </div>
            <!--E海报-->
        </div>
    </div>
</template>

<script>
// 红包码海报
import RedBg from "@/assets/images/red-default-bg.jpg"
import Qrcode from "qrcode"
export default {
    name: "poster",
    data () {
      return {
          show_show: false,
          // 海报css缩放
          scale: 0,
          // 合成海报所需数据
          data: {},
          // 图片对象
          bg: null,  // 背景图片
          header: null, // 头像
          qrcode: null, // 二维码
          // canvas信息
          canvas: null,
          context: null,
          // 二维码地址
          src: ''
      }
    },
    props: {
      // 显示操作
      is_show: {
        type:Number,
        default: 0
      },
      // 红包id
      red_id: {
          type: Number,
          default: 0
      }
    },
    watch: {
      is_show () {
         this.showPoster()
      },
      red_id (value) {
          console.log(value)
      }
    },
    created() {
        this.showPoster()
        this.getPsPoster()
            .then(() => {
                return this.loadImages()
            })
            .then(() => {
                //合成海报
                this.canvas = document.createElement("canvas")
                this.context = this.canvas.getContext("2d")

                this.canvas.width = this.bg.width
                this.canvas.height = this.bg.height
                this.context.drawImage(this.bg,0,0)

                //头像
                this.psHeader()

                //二维码
                this.psQrcode()

                //红包title
                this.psTitle()

                // 提示文字
                this.psHint()

                //昵称
                this.psNickname()

                this.src = this.canvas.toDataURL('image/jepg',.8)
            })
    },
    methods: {
        // 显示海报区域
        showPoster() {
            this.show_show = true
            setTimeout(() => {
                this.scale = 1
            },10)
        },
        // 关闭区域
        close () {
            this.scale = 0
            setTimeout(() => {
                this.show_show = false
            },10)
        },
        /**
         * 获取合成海报所需数据
         */
        getPsPoster() {
            return this.$sendGet("red/poster/" + this.red_id)
                .then((res) => {
                    this.data = res.data.data
                    if(process.env.NODE_ENV !== 'production') {
                        this.data.header = 'https://file.geekdm.com/test-header.jpg'
                    }
                    Qrcode.toDataURL(this.data.qrcode,{
                        margin: 0
                    },(err, url)=>{
                        this.data.qrcode = url
                    })
                    this.data.bg = RedBg
                })
        },
        /**
         * 监听生成红包码各种图片加载完成
         */
        loadImages(){
            this.bg = new Image();
            this.bg.setAttribute("crossOrigin","*");
            this.bg.src = this.data.bg;
            this.header = new Image();
            this.header.setAttribute("crossOrigin","*");
            this.header.src = this.data.header;
            this.qrcode = new Image();
            this.qrcode.setAttribute("crossOrigin","*");
            this.qrcode.src = this.data.qrcode;
            let bg = new Promise((success)=>{
                this.bg.onload = ()=>{
                    success(true);
                }
            });
            let header = new Promise((success)=>{
                this.header.onload = ()=>{
                    success(true);
                }
            });
            let qrcode = new Promise((success)=>{
                this.qrcode.onload = ()=>{
                    success(true);
                }
            });
            return new Promise((success)=>{
                Promise.all([bg,header,qrcode])
                    .then(()=>{
                        success();
                    })
            });
        },
        /**
         * 裁剪二维码头像
         */
        psHeader(){
            let wh = 210
            let header_x = (this.bg.width / 2) - wh/2
            let header_y = 175
            this.circleImg(this.header,header_x,header_y,wh/2)
        },
        /**
         * 画二维码
         */
        psQrcode(){
            let wh = 300
            let x = (this.bg.width / 2) - (wh/2)
            let y = 600
            this.context.drawImage(this.qrcode,x,y,wh,wh)
        },
        /**
         * 用户昵称
         */
        psNickname(){
            this.context.fillStyle = "#ffffff"
            this.context.font = "32px Georgia"
            this.context.textAlign = "center"
            this.context.fillText(this.data.nickname+'的红包',this.bg.width/2,430)
        },
        /**
         * 红包标题
         */
        psTitle(){
            this.context.fillStyle = "yellow";
            this.context.font = "35px Georgia";
            this.context.textAlign = "center";
            this.context.fillText(this.data.title,this.bg.width/2,130);
        },
        /**
         * 长按识别二维码开红包
         */
        psHint() {
            this.context.fillStyle = "#FFFFFF";
            this.context.font = "30px Georgia";
            this.context.textAlign = "center";
            this.context.fillText("长按识别二维码开红包",this.bg.width/2,570);
        },
        /**
         * 将一个正方形改成圆形到指定坐标
         * @param ctx
         * @param img
         * @param x
         * @param y
         * @param r
         */
        circleImg(img,x, y, r) {
            this.context.save()
            let d =2 * r
            let cx = x + r
            let cy = y + r
            this.context.arc(cx, cy,r,0,2*Math.PI)
            this.context.clip()
            this.context.drawImage(img, x, y, d, d)
            this.context.restore()
        }
    }
}
</script>

<style scoped lang="less">
    @import "@/theme.less";
    .poster{
        position: fixed;
        z-index: 100;
        left:0;
        right: 0;
        top:0;
        bottom: 0;
    }
    #poster{
        position: relative;
        padding-top: 70px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        transform: scale(0);
        transition: .1s;
        .close{
            position: absolute;
            right:10px;
            top:20px;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            i{
                font-size: 20px;
            }
        }
        .poster-poster{
            position: absolute;
            left:72.5px;
            top:50%;
            transform: translateY(-50%);
            width: 230px;
            height: 409px;
            margin: 0 auto;
            border-radius: 10px;
            img{
                width: 100%;
                height: 100%;
                border-radius: 10px;
                object-fit: cover;
            }
            h3{
                font-size: @font-middle;
                text-align: center;
                color: #fff;
                margin-bottom: 10px;
            }
        }
    }
</style>
